/* Element Plus 日期选择器弹出面板全局样式 */
/* 由于弹出面板挂载在 body 下,需要使用非 scoped 样式 */

/* 1. 下拉面板主体容器 */
.el-picker-panel {
  background: linear-gradient(180deg, #002C29 0%, #011715 100%) !important;
  border: 1px solid rgba(212, 255, 239, 0.3) !important;
}

/* 2. 日期文字颜色配置 */
/* 默认日期颜色 */
.el-date-table td.available {
  color: #D4FFEF !important;
}

/* 上个月/下个月日期颜色 */
.el-date-table td.prev-month,
.el-date-table td.next-month {
  color: #6a9188 !important;
}

/* 当天日期颜色 */
.el-date-table td.today .el-date-table-cell__text {
  color: #f4a200 !important;
  font-weight: bold;
}

/* 3. 选中日期样式 */
.el-date-table td.current:not(.disabled) .el-date-table-cell__text{
  background: linear-gradient(144deg, #FFB200 8%, #B53900 96%) !important;
  color: #FFFFFF !important;
}

/* 4. 弹出层边框样式 */
.el-popper.is-light {
  border: 1px solid rgba(212, 255, 239, 0.3) !important;
  background: linear-gradient(180deg, #002C29 0%, #011715 100%) !important;
}

/* 5. 弹出层箭头样式 */
.el-popper.is-light .el-popper__arrow::before {
  background: #002C29 !important;
  border: 1px solid rgba(212, 255, 239, 0.3) !important;
}

/* 6. 日期单元格悬停效果 */
.el-date-table td.available:hover .el-date-table-cell {
  background: rgba(212, 255, 239, 0.1) !important;
  color: #D4FFEF !important;
}

/* 7. 面板头部样式（年月切换区域） */
.el-date-picker__header {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(212, 255, 239, 0.2) !important;
  color: #D4FFEF !important;
}

.el-date-picker__header-label {
  color: #D4FFEF !important;
}

/* 头部按钮样式 */
.el-picker-panel__icon-btn {
  color: #D4FFEF !important;
}

.el-picker-panel__icon-btn:hover {
  color: #06FFB0 !important;
}

/* 8. 星期标题样式 */
.el-date-table th {
  color: #7ea196 !important;
  border-bottom: 1px solid rgba(212, 255, 239, 0.1) !important;
}
